<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>java 朱海涛 18337666124</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{../layui/css/layui.css}" >
    <style>
        body{
            text-align: center;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="test1"></div>
<button type="button" class="layui-btn" onclick="search()">查询</button>
<table id="demo" lay-filter="test"></table>

<script th:src="@{../layui/layui.all.js}"></script>
<script th:inline="javascript" >
    var transfer = layui.transfer;
    $.get("/getColumns",function (data) {
        var transfetData=[];
        for(var i=0;i<data.length;i++){
            transfetData.push({"value":data[i], "title": data[i], "disabled": "", "checked": ""})
        }
        layui.use('transfer', function(){
            //渲染
            transfer.render({
                elem: '#test1'  //绑定元素
                ,data: transfetData
                ,id: 'demo1' //定义索引
            });
        });
    });
    function search() {
        var getData = transfer.getData('demo1');
        var searchData=[];
        var th=[];
        if(getData.length!==0){
            th.push({field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'})
        }
        for (var i=0;i<getData.length;i++){
            searchData.push(getData[i].value);
            th.push({field: getData[i].value, title: getData[i].value, width:120})
        }
        $.ajax({
            type:'post',
            url:'/get',
            data:JSON.stringify(searchData), //将对象转为为json字符串
            dataType:"json",
            contentType:"application/json; charset=utf-8",
            success:function(data){
                console.log(data)
                var table = layui.table;
                //执行渲染
                table.render({
                    elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
                    ,height: 315 //容器高度
                    ,cols: [//表头 加个注释就可以了。
                        th
                    ] //设置表头
                    ,data:data.data
                });
            }
        })
    }
</script>
</body>
</html> 